<template>
	<view class="page">
		<!-- 自定义头部 start -->
		<fu-custom bgColor="bg-white" :isBack="true">
			<view slot="content">修改支付密码</view>
		</fu-custom>
		<!-- 自定义头部 end -->
		<!-- 获取验证码 start -->
		<view class="per">
			<view class="padding fu-flex fu-flex-center">
				<text class="">当前手机号：{{ userInfo.mobile || '' }}</text>
			</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content flex"><input type="number" value="" maxlength="4" v-model="code"
							placeholder="请输入验证码" placeholder-style="color:#999;" /></view>
					<view class="">
						<button class="yanZhengMa" :loading="verCodeBtnLoading"
							@tap="handleSendVerCode">{{ beginning ? time + 's后重新获取' : '获取验证码' }}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 获取验证码 end -->
		<!-- 验证按钮 start -->
		<view class="btn_cloce padding">
			<fu-button :loading="loading" style="background-color: #D72620;border-radius: 8rpx;" type="error" @click="tappass">验证</fu-button>
		</view>
		<!-- 验证按钮 end -->
		<!-- 支付密码弹窗 start -->
		<fu-payment-password ref="paymentPassword" :showClose="true" :mode="mode" @submit="submitHandle" />
		<!-- 支付密码弹窗 end -->
		<!-- 断网检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网检测 end -->
	</view>
</template>

<script>
	// 引入支付密码组件
	import fuPaymentPassword from '../../components/fu-payment-password/sanshui-payment-password/index.vue';
	// 引入验证文件
	import {
		validate
	} from '@/common/utils/index';
	export default {
		data() {
			return {
				userInfo: {}, //用户信息
				pay_password: '', //支付密码
				code: '', //验证码
				mobile: '', //手机号
				mode: 2, //支付密码弹窗类型
				loginBtnLoading: false, // 登录按钮加载动画
				verCodeBtnLoading: false, // 获取验证码按钮是否可点击
				timerInterVal: null, //定时器对象
				time: 60, //倒计时60S
				beginning: false, //显示倒计时
				is_click: false, //是否可提交
				loading: false, //是否显示验证按钮loading
			};
		},
		// 组件
		components: {
			fuPaymentPassword
		},
		onLoad() {
			// 获取用户数据
			this.userInfo = uni.getStorageSync('USER_INFO');
			// 获取用户手机号
			this.getMobile();
		},
		methods: {
			/**
			 * @description 获取手机号
			 */
			getMobile() {
				//获取手机号
				this.$api.post(global.apiUrls.postUserGet_user_phone).then(res => {
					if (res.data.code == 1) {
						this.mobile = res.data.data;
					}
				});
			},
			/**
			 * @description 修改支付密码
			 * @param {Number,String} pay_password 密码
			 * @param {Number,String} code 验证码
			 * @param {Number,String} mobile 手机号
			 * @param {Number} type 验证码类型
			 */
			forgetPwd() {
				//修改支付密码
				this.$api
					.post(global.apiUrls.postUserForget_pay_password, {
						pay_password: this.pay_password,
						code: this.code,
						mobile: this.mobile,
						type: 6
					})
					.then(res => {
						// 接口提示信息
						this.$message.info(res.data.msg);
						if (res.data.code == 1) {
							// 修改成功返回上一页
							setTimeout(() => {
								uni.navigateBack();
								return;
							}, 1200);
						}
					});
			},
			/**
			 * @description 支付密码组件事件
			 * @param {Object} e 事件对象
			 * @param {Number,String} e.type=reset 重置密码
			 */
			submitHandle(e) {
				//输入密码完成
				if (e.type == 'reset') {
					// 获取输入密码值
					this.pay_password = e.value;
					this.forgetPwd();
				}
			},
			/**
			 * @description 显示密码输入组件
			 */
			showModal() {
				//显示密码输入组件
				this.$refs.paymentPassword.modalFun('show');
			},
			/**
			 * @description 隐藏密码输入组件
			 */
			hideModal() {
				//隐藏密码输入组件
				this.$refs.paymentPassword.modalFun('hide');
			},
			/**
			 * @description 验证码校验
			 * @param {Number,String} code 验证码
			 * @param {Number,String} mobile 手机号
			 * @param {Number} type 验证码类型
			 */
			tappass() {
				//校验验证码是否输入
				if (!this.code.trim()) {
					this.$message.info('验证码不能为空');
					return false;
				}
				// 显示验证按钮loading
				this.loading = true;
				this.$api
					.post(global.apiUrls.PostUserCheckVerifyCode, {
						code: this.code,
						mobile: this.mobile,
						type: 6
					})
					.then(res => {
						// 隐藏验证按钮loading
						this.loading = false;
						if (res.data.code == 1) {
							this.showModal(); //显示密码弹窗
						} else {
							this.$message.info(res.data.msg); //验证失败提示
						}
					}).catch(() => {
						// 隐藏验证按钮loading
						this.loading = false;
					});
			},
			/**
			 * @description 获取验证码
			 * @param {Number}  is_test 是否是测试环境
			 * @param {Number,String}  mobile 手机号
			 *  @param {Number,String}  type 验证码类型
			 */
			handleSendVerCode() {
				let phone = this.mobile;
				// 校验手机号是否正确
				if (!validate(phone, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				// 是否显示倒计时 true 显示倒计时  false 获取验证码
				if (this.beginning) return false;
				// 按钮加载动画开启
				this.verCodeBtnLoading = true;

				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: phone,
						type: 6
					})
					.then(res => {
						// 按钮加载动画关闭
						this.verCodeBtnLoading = false;
						let that = this;
						if (res.data.code == 1) {
							// 倒计时是否在进行中 若在进行中则不能再次点击获取验证码
							this.beginning = true;
							// 清除倒计时
							clearInterval(this.timerInterVal);
							//开始倒计时
							this.timerInterVal = setInterval(() => {
								if (that.time == 1) {
									//倒计时结束
									clearInterval(that.timerInterVal);
									that.time = 60;
									that.beginning = false;
									return;
								}
								that.time--;
							}, 1000);
							// 获取验证码后提示
							if (res.data.data.code) this.$message.info('验证码为' + res.data.data.code + '请注意查收');
						} else {
							// 获取验证码失败提示
							this.$message.info(res.data.msg);
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	// 验证按钮 start
	.yanZhengMa {
		position: absolute;
		padding: 0;
		right: 0;
		color: #2999f8;
		font-size: 28rpx;
		background: none;
		height: 90upx;
		line-height: 90upx;
		top: 0;

		&:after {
			border: none;
		}
	}

	.btn_cloce {
		width: 100%;
		text-align: center;
		margin-top: 32rpx;
		position: absolute;
		bottom: 16px;
		left: 0;
	}

	// 验证按钮 end

	// 获取验证码 start
	.per {
		padding: 0 20upx;
		font-size: 28upx;
		background-color: #fff;

		.per_row {
			padding: 30upx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ededed;

			.row_right {
				text-align: right;

				.aa {
					color: #999999;
					display: inline-block;
					margin-right: 10upx;
				}
			}
		}
	}

	// 获取验证码 end
</style>
